<template>
  <div class="product-form">
    <div class="page-header">
      <h2>{{ isEdit ? '编辑商品' : '添加商品' }}</h2>
    </div>
    
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      
      <el-form-item label="商品描述" prop="description">
        <el-input type="textarea" v-model="form.description" placeholder="请输入商品描述" :rows="4"></el-input>
      </el-form-item>
      
      <el-form-item label="商品价格" prop="price">
        <el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0"></el-input-number>
        <span class="unit">元</span>
      </el-form-item>
      
      <el-form-item label="库存数量" prop="stock">
        <el-input-number v-model="form.stock" :min="0" :step="1"></el-input-number>
      </el-form-item>
      
      <el-form-item label="商品分类" prop="category">
        <el-input v-model="form.category" placeholder="请输入商品分类"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm">{{ isEdit ? '保存修改' : '添加商品' }}</el-button>
        <el-button @click="$router.push('/products')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import productApi from '@/api/product'

export default {
  name: 'ProductForm',
  
  data() {
    return {
      isEdit: false,
      form: {
        productId: null,
        name: '',
        description: '',
        price: 0,
        stock: 0,
        category: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', min: 0, message: '价格必须大于等于0', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入库存数量', trigger: 'blur' },
          { type: 'number', min: 0, message: '库存必须大于等于0', trigger: 'blur' }
        ]
      }
    }
  },
  
  created() {
    // 判断是否为编辑模式
    const id = this.$route.params.id
    if (id) {
      this.isEdit = true
      this.fetchProduct(id)
    }
  },
  
  methods: {
    // 获取商品详情
    async fetchProduct(id) {
      try {
        const response = await productApi.getProduct(id)
        this.form = response.data
      } catch (error) {
        this.$message.error('获取商品信息失败')
      }
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            let response
            if (this.isEdit) {
              response = await productApi.updateProduct(this.form.productId, this.form)
            } else {
              response = await productApi.addProduct(this.form)
            }
            
            if (response.data.success) {
              this.$message.success(response.data.message)
              this.$router.push('/products')
            } else {
              this.$message.error(response.data.message)
            }
          } catch (error) {
            this.$message.error(this.isEdit ? '更新商品失败' : '添加商品失败')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.product-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 20px;
}

.unit {
  margin-left: 8px;
}

.el-form {
  max-width: 500px;
}
</style> 